<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<form action="/" method="post" id="myForm">
    <table>
        <tr>
            <td>
                用户名：
            </td>
            <td>
                <input type="text" name="userName" id="userName" placeholder="请输入用户名" required onblur="checkUserName()">
                <span id="userBox"></span>
            </td>
        </tr>
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="password" name="password" id="password" placeholder="请输入密码" required />
            </td>
        </tr>
        <tr>
            <td>
                邮箱：
            </td>
            <td>
                <input type="email" name="email" id="email" placeholder="请输入邮箱地址" required onblur="checkEmail()">
                <span id="emailBox"></span>
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" id="submit" value="注册">
            </td>
            <td></td>
        </tr>
    </table>
</form>
<div id="loadTest">
</div>
<script>
	
	$("#loadTest").load("NewUserServlet",{
		method:"checkEmail",
		email:"hhw@kgc.cn"
	})
	
    function checkUserName() {
    	
    	if($("#userName").val().trim()===""){
    		$("#userBox").html("用户名不能为空");
    	}else{
    		/* $.ajax({
                url:"NewUserServlet",//你要访问的地址
                type:"post",//提交方式
                data:{//本次请求携带的数据
                  method:"checkUserName",
                  userName:$("#userName").val()
                },
                dataType:"text",//预期服务端返回的数据类型
                success:function(result){//请求成功后要调的函数
                    if(result=="false"){
                    	$("#submit").attr("disabled",true);
                    	$("#userBox").html("当前用户名已被注册，不可用！");
                    }else{
                    	$("#submit").attr("disabled",false);
                    	$("#userBox").html("当前用户名可以使用");
                    	checkEmail();
                    }
                }
            }) */
            $.get("NewUserServlet",{
            	method:"checkUserName",
            	userName:$("#userName").val()
            },function(result){
            	if(result==="false"){
            		$("#submit").attr("disabled",true);
            		$("#userBox").html("当前用户名已被注册")
            	}else{
            		$("#submit").attr("disabled",false);
            		$("#userBox").html("当前用户名可以使用");
            	}
            },"text")
    	}	
    }
    function checkEmail() {
        if($("#email").val().trim()===""){
        	$("#emailBox").html("邮箱不能为空");
        }else{
        	/* $.ajax({
        		url:"NewUserServlet",//要访问的地址
        		type:"post",//发送请求的方式
        		data:{//要携带的参数
        			method:"checkEmail",
        			email:$("#email").val()
        		},
        		dataType:"json",//经过协商后台传JSON过来，所以这里一定要写成JSON
        		success:function(result){//访问成功后的回调函数
        			if(result.status === 0){//状态码是0表示成功
        				$("#emailBox").html(result.msg);
        				$("#submit").attr("disabled",false);
        			}else{//状态码不是0表示失败
        				$("#emailBox").html(result.msg);
        				$("#submit").attr("disabled",true);
        			}
        		}
        	}) */
        	$.getJSON("NewUserServlet",{
        		method:"checkEmail",
        		email:$("#email").val()
        	},function(result){
        		if(result.status===0){
        			$("#emailBox").html(result.msg);
    				$("#submit").attr("disabled",false);
        		}else{
        			$("#emailBox").html(result.msg);
    				$("#submit").attr("disabled",true);
        		}
        	})
        }
    }
    var a = 111110;
    //当点击提交按钮时触发此事件
    $("#submit").click(function(){
    	//serializeArray()获取表单中所有有效的字段
    	var value = $("#myForm").serializeArray();
    	value = $.param(value);
    	console.log(value);
    	$.post("NewUserServlet",value+"&method=register",function(result){
    		console.log(result)
    	},"json")
    })  
</script>
</body>
</html>